<template>
	<view class="container">
		<!-- 固定的顶部区域 -->
		<view class="fixed-header">
			<!-- 顶部安全区域 -->
			<view class="safe-area"></view>
			
			<!-- 顶部标题区 -->
			<view class="header">
				<view class="header-content">
					<text class="title">通知中心</text>
					<text class="clear-btn" @tap="clearAllNotifications" v-if="notifications.length > 0">
						清空
					</text>
				</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view scroll-y class="scroll-container">
			<view class="content">
				<!-- 占位，防止内容被顶部遮挡 -->
				<view class="header-placeholder"></view>
				
				<!-- 通知列表 -->
				<view class="notify-list">
					<view class="notify-item" v-for="(item, index) in notifications" :key="index"
						@touchstart="touchStart($event, index)"
						@touchmove="touchMove($event, index)"
						@touchend="touchEnd($event, index)"
						:style="{ transform: `translateX(${item.offset}px)` }">
						<!-- 通知内容 -->
						<view class="notify-main">
							<view class="notify-icon">{{item.icon}}</view>
							<view class="notify-content">
								<text class="notify-title">{{item.title}}</text>
								<text class="notify-desc">{{item.desc}}</text>
								<text class="notify-time">{{item.time}}</text>
							</view>
						</view>
						
						<!-- 竖线分隔线 -->
    				<view class="divider"></view> 

						<!-- 操作按钮 -->
						<view class="notify-actions">
							<view class="action-btn read-btn" @tap.stop="markAsRead(index)">
								<image class="action-icon" src="../../static/已读.png" mode="aspectFit"></image>
								<text class="action-text">已读</text>
							</view>

							<view class="action-btn delete-btn" @tap.stop="deleteNotify(index)">
								<image class="action-icon" src="../../static/删除.png" mode="aspectFit"></image>
								<text class="action-text delete-text">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @tap="switchTab('home')" :class="{ active: currentTab === 'home' }" data-tab="home">
				<image 
					class="tab-icon" 
					:src="getTabIcon('home')" 
					mode="aspectFit"
				/>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @tap="switchTab('notify')" :class="{ active: currentTab === 'notify' }" data-tab="notify">
				<image class="tab-icon" :src="getTabIcon('notify')" mode="aspectFit"></image>
				<text class="tab-text">通知</text>
			</view>
			<view class="tab-item tab-item-center">
				<view class="center-button" 
					:class="{ active: isCenterActive }" 
					@tap="handleCenterClick"
				>
					<image 
						:src="isCenterActive ? '../../static/deepseek-active.png' : '../../static/deepseek.png'" 
						mode="aspectFit"
					></image>
				</view>
			</view>
			<view class="tab-item" @tap="switchTab('control')" :class="{ active: currentTab === 'control' }" data-tab="control">
				<image class="tab-icon" :src="getTabIcon('control')" mode="aspectFit"></image>
				<text class="tab-text">控制</text>
			</view>
			<view class="tab-item" @tap="switchTab('setting')" :class="{ active: currentTab === 'setting' }" data-tab="setting">
				<image class="tab-icon" :src="getTabIcon('setting')" mode="aspectFit"></image>
				<text class="tab-text">设置</text>
			</view>
		</view>
	</view>
</template>

<script>
  import notify from "./notify";
  export default notify
</script>

<style>
	@import url("../../pages/notify/notify.css");
</style> 